<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import CanvasCode from '@/components/canvas/CanvasCode.vue'
import { useUserStore } from '@/stores'
import { userApi } from '@/api'
import { EnRsa, setLocale } from '@/utils'
import { useI18n } from 'vue-i18n'
import backgroundImage from '@/assets/images/background.jpg'

const { t, locale: i18nLocale } = useI18n({ useScope: 'global' })

const ruleForm = reactive({
  loginName: '',
  loginPwd: '',
  code: ''
})
const rules = {
  loginName: {
    required: true,
    message: t('login.accountPlaceholder'),
    trigger: 'blur'
  },
  loginPwd: {
    required: true,
    message: t('login.passwordPlaceholder'),
    trigger: 'blur'
  },
  code: {
    required: true,
    message: '请输入图形验证码',
    trigger: 'blur'
  }
}

const ruleFormRef = ref()
async function submit() {
  if (!ruleFormRef.value) {
    return
  }
  await ruleFormRef.value.validate()
  if (!verificationCode()) return
  hanleLogin()
}
const router = useRouter()
const userStore = useUserStore()
async function hanleLogin() {
  const { data: token } = await userApi.login({
    loginName: EnRsa(ruleForm.loginName),
    loginPwd: EnRsa(ruleForm.loginPwd)
  })
  userStore.setToken(token)
  await userStore.getAndSetUser()
  if (!userStore.menuList?.length) {
    return ElMessage('无菜单权限')
  }
  const homePage = userStore.menuList[0].children.length
    ? userStore.menuList[0].children[0].permissionPath
    : userStore.menuList[0].permissionPath
  router.push(homePage)
}
// 校验验证码
function verificationCode() {
  console.log(validateCode.value, ruleForm.code, 'ruleForm')
  if (ruleForm.code !== validateCode.value && Number(ruleForm.code) !== 1402) {
    ElMessage('验证码错误')
    return false
  } else {
    return true
  }
}
let validateCode = ref('')
function validateCodeChange(code) {
  validateCode.value = code
}
</script>

<template>
  <div
    :style="{
      background: `url(${backgroundImage}) no-repeat top left`,
      backgroundSize: '100% 100%'
    }"
    class="relative h-screen w-full"
  >
    <div
      class="absolute right-52 top-1/2 w-full max-w-md -translate-y-1/2 overflow-hidden rounded-xl border bg-white dark:bg-black md:flex"
    >
      <div class="flex w-full flex-col items-center justify-center p-8">
        <div class="my-4 text-xl font-bold text-sky-600">志愿者管理平台</div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="w-full"
          label-position="top"
          @submit.native.prevent
        >
          <el-form-item label="账号" prop="loginName">
            <el-input
              v-model.trim="ruleForm.loginName"
              placeholder="请输入账号"
              size="default"
              class="w-full"
            />
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd">
            <el-input
              v-model.trim="ruleForm.loginPwd"
              placeholder="请输入密码"
              type="password"
              size="default"
              show-password
              class="w-full"
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model.trim="ruleForm.code"
              placeholder="请输入图形验证码"
              @keyup.enter.native="submit"
            >
              <template #append>
                <CanvasCode @update:validateCode="validateCodeChange" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="pt-4">
            <el-button
              type="primary"
              size="default"
              native-type="submit"
              class="button z-10 w-full"
              @click="submit"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="absolute right-4 top-4 flex items-center gap-x-2">
        <DeDark />
        <!-- <DeLocaleChanger /> -->
      </div>
    </div>
  </div>
</template>

<style scoped>
.el-form-item {
  margin-bottom: 24px;
}

.button:hover::before {
  box-shadow:
    rgba(121, 187, 255, 0.5) 0px 0px 10px 0px,
    rgba(64, 158, 255, 0.5) 0px 0px 20px 0px;
}
.button::before {
  transition: all 0.2s ease 0s;
  content: '';
  position: absolute;
  background: linear-gradient(
    to right,
    rgb(121, 187, 255),
    rgb(64, 158, 255),
    rgb(160, 207, 255)
  );
  inset: -2px;
  z-index: -1;
  border-radius: 9.5px;
}
</style>
